﻿
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>普华篮球队</title>
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=500, minimum-scale = 0.72, maximum-scale = 0.72, target-densitydpi=device-dpi">
    <style>
        @-webkit-keyframes rotatemusic {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }

        ::-webkit-input-placeholder {
            color: #000;
        }
    </style>
    <style type="text/css">
        body {
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: none;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            background: black;
        }

        div#content {
            position: relative;
            border: 1px solid #000;
            width: 500px;
            height: 800px;
            margin: 0 auto;
            top: 0px;
            overflow: hidden;
            clear: both;
        }


        #pBg1cNNqT-an-obj-1 {
            position: absolute;
            -webkit-transform: translate3d(0px, 1px, 0px);
            width: 500px;
            height: 815px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-2 {
            position: absolute;
            -webkit-transform: translate3d(0px, 636px, 0px);
            width: 500px;
            height: 180px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-3 {
            position: absolute;
            -webkit-transform: translate3d(125px, 330px, 0px);
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-4 {
            position: absolute;
            -webkit-transform: translate3d(-168px, -108px, 0px);
            width: 350px;
            height: 338px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-5 {
            position: absolute;
            -webkit-transform: translate3d(88px, -66px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.20307692307692304, 0.22, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-5-0 2.1347s 1.4663s 1 linear normal both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-5-0 {
            0% {
                -webkit-transform: translate3d(88px, -66px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.20307692307692304, 0.22, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(203px, -90px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(75.6deg) scale3d(-0.08123076923076922, 0.08800000000000001, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-6 {
            position: absolute;
            -webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-6-0 2.491s 1.0036s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-6-0 {
            0% {
                -webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);
                -webkit-animation-timing-function: linear;
            }

            100% {
                -webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);
                -webkit-animation-timing-function: linear;
            }
        }

        #pBg1cNNqT-an-obj-7 {
            position: absolute;
            -webkit-transform: translate3d(-108px, -101px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.24, 0.25, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-7-0 2.3069s 0.8231s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-7-0 {
            0% {
                -webkit-transform: translate3d(-108px, -101px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.24, 0.25, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(-138px, -262px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.096, 0.1, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0.2;
            }
        }

        #pBg1cNNqT-an-obj-8 {
            position: absolute;
            -webkit-transform: translate3d(-34px, -148px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.14, 0.14, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-8-0 1.2852s 1.6282s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-8-0 {
            0% {
                -webkit-transform: translate3d(-34px, -148px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.14, 0.14, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(-33px, -255px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.042, 0.042, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0.2;
            }
        }

        #pBg1cNNqT-an-obj-9 {
            position: absolute;
            -webkit-transform: translate3d(67px, -113px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.17, 0.17, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-9-0 2.1264s 1.1191s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-9-0 {
            0% {
                -webkit-transform: translate3d(67px, -113px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.17, 0.17, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(78px, -249px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.068, 0.068, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0.3;
            }
        }

        #pBg1cNNqT-an-obj-10 {
            position: absolute;
            -webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-10-0 2.7365s 0.2527s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-10-0 {
            0% {
                -webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-11 {
            position: absolute;
            -webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-11-0 1.9133s 1.2455s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-11-0 {
            0% {
                -webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-12 {
            position: absolute;
            -webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-12-0 2.1191s 0.1444s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-12-0 {
            0% {
                -webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(168px, -152px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.051000000000000004, 0.051000000000000004, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-13 {
            position: absolute;
            -webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-13-0 1.9061s 0.3574s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-13-0 {
            0% {
                -webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(185px, -176px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.069, 0.061959183673469385, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-14 {
            position: absolute;
            -webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-14-0 1.7437s 1.0036s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-14-0 {
            0% {
                -webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(-153px, -221px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-15 {
            position: absolute;
            -webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-15-0 2.4224s 0.4982s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-15-0 {
            0% {
                -webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(-104px, -270px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.125, -0.125, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-16 {
            position: absolute;
            -webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);
            width: 113px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-16-0 1.4224s 0s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-16-0 {
            0% {
                -webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(12px, -243px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.16, 0.16, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-17 {
            position: absolute;
            -webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-17-0 3.7798s 0s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-17-0 {
            0% {
                -webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(-12px, -289px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.06260869565217392, 0.072, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-18 {
            position: absolute;
            -webkit-transform: translate3d(50px, -123px, 0px) scale3d(0.29, 0.29, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-18-0 3.6607s 0.1191s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-18-0 {
            0% {
                -webkit-transform: translate3d(50px, -123px, 0px) scale3d(0.29, 0.29, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(121px, -264px, 0px) scale3d(0.0116, 0.0116, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-19 {
            position: absolute;
            -webkit-transform: translate3d(104px, -34px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(81.7deg) scale3d(-0.2836666666666667, 0.23, 1);
            width: 85px;
            height: 113px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-19-0 1.9856s 0.5162s infinite linear both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-19-0 {
            0% {
                -webkit-transform: translate3d(104px, -34px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(81.7deg) scale3d(-0.2836666666666667, 0.23, 1);
                -webkit-animation-timing-function: linear;
                opacity: 1;
            }

            100% {
                -webkit-transform: translate3d(214px, -24px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(91.7deg) scale3d(-0.11346666666666667, 0.09200000000000001, 1);
                -webkit-animation-timing-function: linear;
                opacity: 0;
            }
        }

        #pBg1cNNqT-an-obj-20 {
            position: absolute;
            -webkit-transform: translate3d(114px, 551px, 0px);
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-21 {
            position: absolute;
            -webkit-transform: translate3d(-51px, 36px, 0px) scale3d(0.78, 0.78, 1);
            width: 135px;
            height: 61px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-22 {
            position: absolute;
            -webkit-transform: translate3d(-120px, -149px, 0px) scale3d(0.8, 0.8, 1);
            width: 237px;
            height: 256px;
            top: 0;
            left: 0;
            -webkit-animation: ani-pBg1cNNqT-an-obj-22-0 2.9964s 0s infinite linear alternate both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-22-0 {
            0% {
                -webkit-transform: translate3d(-120px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(0.8, 0.8, 1);
                -webkit-animation-timing-function: linear;
            }

            33.494% {
                -webkit-transform: translate3d(-108px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7deg) scale3d(0.8, 0.8, 1);
                -webkit-animation-timing-function: linear;
            }

            100% {
                -webkit-transform: translate3d(-84px, -153px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(22deg) scale3d(0.8, 0.8, 1);
                -webkit-animation-timing-function: linear;
            }
        }

        #pBg1cNNqT-an-obj-23 {
            position: absolute;
            -webkit-transform: translate3d(-32px, 32px, 0px) scale3d(0.73, 0.73, 1);
            width: 104px;
            height: 159px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-24 {
            position: absolute;
            -webkit-transform: translate3d(23px, 559px, 0px);
            width: 20px;
            height: 20px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-25 {
            position: absolute;
            -webkit-transform: translate3d(244px, -160px, 0px) scale3d(0.72, 0.73, 1);
            width: 195px;
            height: 401px;
            top: 0;
            left: 0;
        }

        #pBg1cNNqT-an-obj-26 {
            position: absolute;
            -webkit-transform: translate3d(295px, -218px, 0px) scale3d(0.66, 0.66, 1);
            width: 161px;
            height: 290px;
            top: 0;
            left: 0;
            -webkit-transform-origin: 47.41% 51.15%;
            -webkit-animation: ani-pBg1cNNqT-an-obj-26-0 1.509s 0s infinite linear alternate both;
        }

        @-webkit-keyframes ani-pBg1cNNqT-an-obj-26-0 {
            0% {
                -webkit-transform: translate3d(321px, -269px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(21deg) scale3d(0.66, 0.66, 1);
                -webkit-transform-origin: 10% 93%;
                -webkit-animation-timing-function: linear;
            }

            100% {
                -webkit-transform: translate3d(321px, -269px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(6deg) scale3d(0.66, 0.66, 1);
                -webkit-transform-origin: 10% 93%;
                -webkit-animation-timing-function: linear;
            }
        }
    </style>
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        $.post('/wechat/GetSDKConfig', { url: 'http://wx.mangdot.com/CoustomHK/.html' }, function (data) {
            wx.config({
                debug: false,
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature,// 必填，签名，见附录1
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            wx.ready(function () {

                wx.onMenuShareAppMessage({
                    title: "普华篮球队",
                    desc: "夜色降临，我们一起前行，在绿色的操场上，一起奔跑着，汗水从脸颊流过，笑了，",
                    link: "http://wx.mangdot.com/CoustomHK/.html",
                    imgUrl: "http://wx.mangdot.com/image/5007.jpg",
                    type: 'link',
                    dataUrl: '',
                    success: function () {
                    },
                    cancel: function () {
                    }
                });

                wx.onMenuShareTimeline({
                    title: "普华篮球队",
                    link: "http://wx.mangdot.com/CoustomHK/.html",
                    imgUrl: "http://wx.mangdot.com/image/5007.jpg",
                    success: function () {
                    },
                    cancel: function () {
                    }
                });

                wx.downloadImage({
                    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
                    isShowProgressTips: 0, // 默认为1，显示进度提示
                    success: function (res) {
                        var localId = res.localId; // 返回图片下载后的本地ID
                        $('#bgImg').attr('src', localId);
                    }
                });

            })
            wx.error(function (res) {
                console.log(res);
            });

        })

    </script>
</head>
<body style="margin:0px">

    <div id="audiocontainer">
        <audio id="bgsound" loop="loop" autoplay="autoplay">
            <source src="/Html/001/img/birthday3.mp3">
        </audio>
    </div>

    <div id="content" style="position:absolute;width:500px;height:815px;overflow:hidden">

        <div id="pBg1cNNqT-an-obj-1"><img id="bgImg" height="815" width="500" src=""></div>
        <div id="pBg1cNNqT-an-obj-2"><img height="180" width="500" src="/html/001/img/2000.jpg"></div>
        <div id="pBg1cNNqT-an-obj-3">
            <div id="pBg1cNNqT-an-obj-4"><img height="338" width="350" src="/html/001/img/2000(1).jpg"></div>
            <div id="pBg1cNNqT-an-obj-5"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-6"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-7"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-8"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-9"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-10"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-11"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-12"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-13"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-14"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-15"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-16"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-17"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-18"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
            <div id="pBg1cNNqT-an-obj-19"><img height="113" width="85" src="/html/001/img/2000(2).jpg"></div>
        </div>
        <div id="pBg1cNNqT-an-obj-20">
            <div id="pBg1cNNqT-an-obj-21"><img height="61" width="135" src="/html/001/img/2000(3).jpg"></div>
            <div id="pBg1cNNqT-an-obj-22"><img height="256" width="237" src="/html/001/img/2000(4).jpg"></div>
            <div id="pBg1cNNqT-an-obj-23"><img height="159" width="104" src="/html/001/img/2000(5).jpg"></div>
        </div>
        <div id="pBg1cNNqT-an-obj-24">
            <div id="pBg1cNNqT-an-obj-25"><img height="401" width="195" src="/html/001/img/2000(6).jpg"></div>
            <div id="pBg1cNNqT-an-obj-26"><img height="290" width="161" src="/html/001/img/2000(7).jpg"></div>
        </div>
    </div>
    <div id="basepoint" style="position: fixed; bottom: 0px; width: 1px; height: 1px; left: -100px;">

    </div>

    <div id="textmask" style="position: absolute; left: 190px; top: 60px; width: 300px; height: 200px; overflow: hidden;">
        <div id="textdiv" style="position: absolute; color: rgb(165, 42, 42); font-size: 16.6667pt; line-height: 26.6667pt; font-weight: 600; font-family:Microsoft YaHei;
z-index: 50000; animation: textdivani 29s linear infinite;">
            夜色降临,<br />
            我们一起前行,<br />
            在绿色的操场上,<br />
            一起奔跑着,<br />汗水从脸颊流过,<br />
            笑了,<br />
        </div>

    </div>


    <div id="cardsound" onclick="switchsound()" style="position: fixed; left: 440px; top: 40px; z-index: 5000; visibility: visible;">


        <img id="sound_image" class="sound_image" src="/Content/music_note_big.png">
        <div id="note_box" style="height:100px;width:44px;position:absolute;left:-20px;top:-80px">
        </div>
        <div id="music_txt" style="color: white; position: absolute; left: -40px; top: 30px; width: 60px; visibility: hidden;">
            关闭
        </div>
    </div>
    <script>
        var audio = document.getElementById('bgsound');
        var div = document.getElementById('sound_image');



        function switchsound() {
            if (audio.paused) {
                audio.play();
                div.setAttribute("class", "");
                div.setAttribute("class", "sound_image");
                return;
            } else {
                audio.pause();
                div.setAttribute("class", "");
                div.setAttribute("class", "sound_image1");
            }
        }




        var height = parseInt($('#textdiv').css('height'));
        setInterval(function () {
            var top = $('#textdiv').position().top - 35
            if ((top + height) > 0) {
                $("#textdiv").animate({ top: top + "px" }, 1500);
            } else {
                $("#textdiv").css('top', '200px');
            }
        }, 2000)

    </script>
    <style>
        .sound_image1 {
            -webkit-transform: rotateZ(360deg);
            -moz-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
        }

        .sound_image {
            animation: rotation 3s linear infinite;
            -webkit-transition: -webkit-transform 2s ease-out;
            -moz-transition: -moz-transform 2s ease-out;
            -o-transition: -o-transform 2s ease-out;
            -ms-transition: -ms-transform 2s ease-out;
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }
    </style>
</body>
</html>